<template>
  <div class="add-bank">
    <titleBar :title="`绑定${bindTypeName}`" />
    <p class="tip">请认真确认您的账户无误，若账户错误需自行承担。</p>    
    <div class="item-input-box">
        <input :placeholder="`请输入${bindTypeName}账号`" v-model="accountNum" class="item-input" />
        <div class="cross flex flex-center-y" v-if="accountNum" v-on:click="accountNum = ''">
            <i class="iconfont icon-guanbi2"></i>
        </div>
    </div>
    <div class="item-input-box">
        <input :placeholder="`请二次输入${bindTypeName}账号`" v-model="accountNum2" class="item-input" />
        <div class="cross flex flex-center-y" v-if="accountNum2" v-on:click="accountNum2 = ''">
            <i class="iconfont icon-guanbi2"></i>
        </div>
    </div>
    <div style="height: .24rem"></div>
    <div class="button" v-on:click="success">确定</div>
  </div>
</template>
<script>
import titleBar from '@/components/title_bar/index.vue'
import {getuserUid} from '@/utils/auth.js'
export default {
    components: {
        titleBar,
    },
    computed: {},
    data(){
      return {
        accountNum: '',
        accountNum2: '',
        bindAcconutRun: false,
        bindTypeName: '',
        userUid: '',
      }
    },
    created(){
      // 支付方式1:支付宝 2：微信 3:银行卡
      let type = this.$route.query?.type
      let userUid = this.$route.query?.userUid
      if(!type || !userUid){
        this.$toast('参数异常')
        window.setTimeout(() => {
          this.$router.go(-1)
        }, 500)
        return
      }
      this.bindType = type
      this.userUid = userUid
      this.bindTypeName = type === '1' ? '支付宝' :
                         type === '2' ? '微信' :
                         '银行卡'
    },
    methods: {
      success(){
        if(!this.bindType){
          return
        }
        console.log('绑定')
        if(this.accountNum.length === 0){
          this.$toast('请输入账户')
          return
        }
        if(this.bindType == 3){
          if(!(/\d{12,19}/.test(this.accountNum))){
            this.$toast('请输入正确的银行卡号')
            return
          }
        }
        if(this.accountNum2.length === 0){
          this.$toast('请确认账户')
          return
        }
        if(this.accountNum !== this.accountNum2){
          this.$toast('两次输入的账号不一致哦')
          return
        }
        this.bindAccuount()
      },
      async bindAccuount(){
        if(this.bindAcconutRun){
          console.log('锁')
          return
        }
        this.bindAcconutRun = true
        let params = {
          userUid: this.userUid,
          createBy: getuserUid(),
          type: this.bindType,
          accountNum: this.accountNum2,
        }
        console.log(params)
        let response
        try {
          response = await HTTP('myWallet/binding', params)
          if(response.code !== 200){
            this.$toast(response.msg || '服务器异常')
            this.bindAcconutRun = false
            return
          }
          console.log(response.data)
          this.bindAcconutRun = false
          this.$router.go(-1)
        } catch (error) {
          this.$toast('数据开小差了')
          console.log(error)
          this.bindAcconutRun = false
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.add-bank{}
.button{
    width: 7.02rem;
    height: .88rem;
    background: $color-primary;
    border-radius: .1rem;
    margin: auto;
    text-align: center;
    line-height: .88rem;
    color: #fff;
    font-size: .28rem;
    margin-top: .35rem;
}
.tip{
  color: $color-text-regular;
  padding: .34rem .24rem 0px .24rem;
  box-sizing: border-box;
}
.item-size{
    width: 7.02rem;
    background-color: #fff;
    margin: auto;
    margin-top: .22rem;
    font-size: .28rem;
    box-sizing: border-box;
    border-radius: .1rem;
    overflow: hidden;
} 
.item-input-box{
    @extend .item-size;
    position: relative;
    .item-input{
        width: 90%;
        height: 1rem;
        border-width: 0px;
        padding-left: .24rem;
        box-sizing: border-box;
    }
    .cross{
        position: absolute;
        z-index: 2;
        top: 0px;
        right: 0px;
        bottom: 0px;
        height: 1rem;
        padding-right: .24rem;
        padding-left: .24rem;
        background-color: #fff;
        .iconfont{
            font-size: .3rem;
            color: #ccc;
        }
    }
}
</style>